<template>
  <div>
    <el-button
      v-if="canCancel"
      type="danger"
      @click="cancel"
    >取消订单</el-button>

    <template v-if="orderState.name === $CONST.ORDER_STATUS.CONFIRM.name">
      <el-button
        type="success"
        @click="produce"
      >开始生产</el-button>
      或

      <el-button
        type="success"
        @click="dialogVisible=true"
      >
        分配订单</el-button>
    </template>

    <el-button
      v-if="orderState.name === $CONST.ORDER_STATUS.IN_PRODUCTION.name"
      type="success"
      @click="delivery"
    >发货</el-button>

    <el-button
      v-if="orderState.name === $CONST.ORDER_STATUS.RECEIVED.name"
      type="success"
      @click="done"
    >完成订单</el-button>

    <el-dialog
      @closed="addLoad = false"
      center
      title="分配订单"
      :visible.sync="dialogVisible"
      width="40%"
      @open="taskFormReset"
    >
      <el-form
        label-width="100px"
        :model="taskForm"
        :rule="taskFormRules"
        ref="taskForm"
      >

        <el-form-item
          label="名称"
          prop="name"
        >
          <el-input
            style="width:120px"
            v-model.trim="taskForm.name"
            placeholder="名称"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="工厂"
          prop="category"
        >
          <el-select
            v-model="taskForm.execFactoryId"
            placeholder="请选择"
            filterable
            clearable
            value-key="id"
            :loading="selectLoading"
            @focus="getFactorySelect"
          >
            <el-option
              v-for="item in subFactorys"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="备注"
          prop="memo"
        >
          <el-input
            type="textarea"
            style="width: 400px"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 10 }"
            v-model="taskForm.memo"
            maxlength="512"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="addLoad"
          @click="submitTask"
        >确定</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
import orderApi from '@/api/order'
import factoryApi from '@/api/factory'
export default {
  props: {
    orderId: Number,
    orderState: Object,
    default: () => this.$CONST.ORDER_STATUS.CREATE
  },
  data () {
    return {
      addLoad: false,
      selectLoading: false,
      dialogVisible: false,
      subFactorys: [],
      taskForm: {
        name: null,
        execFactoryId: null,
        setShowFields: null,
        memo: null
      },
      taskFormRules: {

        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        subFactoryId: [{ required: true, message: '请选择分配的工厂', trigger: 'change' }]
      }
    }
  },
  computed: {
    canCancel () {
      return (
        this.orderState.name === this.$CONST.ORDER_STATUS.CREATE.name ||
        this.orderState.name === this.$CONST.ORDER_STATUS.READY_PAY.name ||
        this.orderState.name === this.$CONST.ORDER_STATUS.PAID.name ||
        this.orderState.name === this.$CONST.ORDER_STATUS.CONFIRM.name
      )
    }
  },
  methods: {
    getFactorySelect () {
      if (this.taskForm.execFactoryId) {
        return
      }
      this.selectLoading = true
      factoryApi
        .getSubFactorys({ showLoading: false })
        .then((res) => {
          this.subFactorys = res.data
          this.selectLoading = false
        })
        .catch((e) => {
          this.selectLoading = false
        })
    },
    submitTask () {
      this.$confirm('确定分配订单任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        orderApi.addTask(this.orderId, this.taskForm).then((res) => {
          this.$message.success('提交成功')
          this.dialogVisible = false
          this.$emit('onSuccess')
        })
      })
    },
    taskFormReset () {
      this.$nextTick(() => {
        this.$refs.taskForm.resetFields()
      })
    },
    produce () {
      this.$confirm('确定开始生产吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        orderApi.produce(this.orderId).then((res) => {
          this.$message.success('提交成功')
          this.$emit('onSuccess')
        })
      })
    },
    delivery () {
      this.$confirm('确定发完货吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        orderApi.delivery(this.orderId).then((res) => {
          this.$message.success('提交成功')
          this.$emit('onSuccess')
        })
      })
    },
    done () {
      this.$confirm('确定完成吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        orderApi.done(this.orderId).then((res) => {
          this.$message.success('提交成功')
          this.$emit('onSuccess')
        })
      })
    },
    cancel () {
      this.$prompt('确定取消订单吗?请填写取消原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '原因'
      }).then(({ value }) => {
        orderApi.cancel(this.orderId, value).then((data) => {
          this.$message.success('提交成功')
          this.$emit('onSuccess')
        })
      })
    }
  }
}
</script>

<style>
</style>
